<script lang="ts" setup>
import {
  computed,
  nextTick,
  onMounted,
  ref,
  watch,
} from 'vue'
import {
  useIntervalFn,
  useMediaControls,
} from '@vueuse/core'

import type { Lines } from 'lyric-resolver'
import Lyric from 'lyric-resolver'
import { NotificationApi } from '@widget-js/core'
import VoiceBar from './VoiceBar.vue'

const props = defineProps({
  title: {
    type: String,
    default: '章鱼哥',
  },
  avatar: { type: String },
  lyric: {
    type: String,
    default: '',
  },
  audio: {
    type: String,
    required: true,
  },
  mute: {
    type: Boolean,
    default: false,
  },
  message: {
    type: String,
    default: '',
  },
})

const audio = ref()
const ringtone = ref()
const hangup = ref()
let time = 0
let lines: Lines[]
const desc = ref(props.message)
const lyric = computed(() => {
  return new Lyric(props.lyric, () => {
  })
})

const { playing: ringtonePlaying } = useMediaControls(ringtone, { src: './audio/ringtone.m4a' })

const {
  playing: hangupPlaying,
  ended: hangupEnded,
} = useMediaControls(hangup, { src: './audio/hangup.m4a' })

const {
  playing: voicePlaying,
  ended: voiceEnded,
} = useMediaControls(audio, { src: props.audio })

watch(voiceEnded, () => {
  hangupPlaying.value = true
})

const {
  pause,
  resume,
} = useIntervalFn(() => {
  time += 10
  if (lines.length > 0) {
    if (lines.length > 1) {
      if (lines[1].lineTime > time) {
        desc.value = lines[0].txt
      }
      else {
        lines.splice(0, 1)
      }
    }
    else {
      desc.value = lines[0].txt
    }
  }
}, 10, { immediate: false })

watch(voicePlaying, (newValue) => {
  if (newValue) {
    ringtonePlaying.value = false
    lines = [...lyric.value.lines]
    resume()
  }
})

watch(hangupEnded, () => {
  stop()
})

function stop() {
  ringtonePlaying.value = false
  voicePlaying.value = false
  pause()
  NotificationApi.hide()
}

function start() {
  time = 0
  ringtonePlaying.value = false
  voicePlaying.value = true
  hangup.value = false
}

defineExpose({ stop })

watch(() => props.message, (newValue) => {
  desc.value = newValue
})

function answerClick() {
  voicePlaying.value = true
}

onMounted(async () => {
  await nextTick()
  start()
})

function hangupClick() {
  stop()
}
</script>

<template>
  <div class="phone-call">
    <audio v-if="!mute" ref="audio" />
    <audio v-if="!mute" ref="ringtone" />
    <audio v-if="!mute" ref="hangup" />
    <img class="avatar" :src="avatar" alt="">
    <div class="content">
      <div class="title">
        {{ title }}
      </div>
      <div class="description">
        {{ desc }}
      </div>
    </div>
    <div v-if="!voicePlaying && !hangupPlaying" class="actions">
      <div class="btn-hangup" @click="hangupClick">
        <img
          width="24"
          src=""
        >
      </div>
      <div class="btn-answer" @click="answerClick">
        <img
          width="24"
          src=""
        >
      </div>
    </div>

    <div v-if="voicePlaying" class="voice">
      <VoiceBar />
      <VoiceBar />
      <VoiceBar />
      <VoiceBar />
      <VoiceBar />
      <VoiceBar />
      <VoiceBar />
      <VoiceBar />
      <VoiceBar background-color="#E39444" />
      <VoiceBar background-color="#E39444" />
      <VoiceBar background-color="#E39444" />
    </div>
  </div>
</template>

<style scoped lang="scss">
$containerHeight: 75px;
$childHeight: calc($containerHeight - 1.6rem);
.phone-call {
  display: flex;
  padding: 0.8rem;
  width: 100%;
  border-radius: 12px;
  align-items: center;

  .avatar {
    height: $childHeight;
    aspect-ratio: 1;
    border-radius: 50%;
  }

  .content {
    flex: 1;
    display: flex;
    align-items: flex-start;
    margin-left: 1rem;
    margin-right: 1rem;
    height: 100%;
    justify-content: space-around;
    flex-direction: column;

    .title {
      font-size: 0.8rem;
      color: rgba(255, 255, 255, 0.6);
    }

    .description {
      color: white;
      font-size: 1rem;
      text-overflow: ellipsis;
      max-width: 170px;
      white-space: nowrap;
      overflow: hidden;
    }
  }

  .voice {
    display: flex;
    align-items: center;

    .voice-bar {
      margin-right: 2px;

      &.orange {
        background-color: #E39444;
      }
    }
  }

  .actions {
    display: flex;

    .btn-hangup, .btn-answer {
      background-color: red;
      height: $childHeight;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-items: center;
      justify-content: center;
      aspect-ratio: 1;

      .iconfont {
        font-size: 1.5rem;
        color: white;
      }
    }

    .btn-hangup {
      background-color: #ff453b;
      margin-right: 0.5rem;
    }

    .btn-answer {
      background-color: #32d15a;
    }

  }
}
</style>
